<template>
  <div class="questionBank-container">
    <!-- card卡片 shadow阴影 -->
    <el-card shadow class="card">
      <!-- 标题 -->
      <div class="btn_wrapper">
        <span style="font-size: 12px; color: pink">说明: 目前支持学科和关键字条件筛选</span>

        <el-button @click="skipQuestions" type="success" size="medium " icon="el-icon-edit">新增试题</el-button>
      </div>
      <!-- 筛选区域 -->
      <el-form size="small" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select @change="changeSubject" v-model="requestParams.subjectID">
                <el-option v-for="item in subjectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="requestParams.catalogID">
                <el-option v-for="item in directoryOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="requestParams.tags" style="width: 100%">
                <el-option v-for="item in tagOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" v-model="requestParams.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="requestParams.questionType" style="width: 100%">
                <el-option v-for="item in questionTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="requestParams.difficulty" style="width: 100%">
                <el-option v-for="item in diffOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="requestParams.direction" style="width: 100%">
                <el-option v-for="item in directionOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="requestParams.creatorID" style="width: 100%">
                <el-option v-for="item in userOptions" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="requestParams.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="requestParams.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select @change="handleCity" v-model="requestParams.province" style="width: 48%; margin-right: 2%">
                <el-option v-for="item in cityOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="requestParams.city" style="width: 50%">
                <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button @click="filter()" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总数 -->
      <el-alert :title="`数据一共${totle}条`" type="info" show-icon :closable="false"> </el-alert>
      <!-- 列表区域 -->
      <el-table :data="questionsList">
        <el-table-column prop="number" label="试题编号" width="120"></el-table-column>
        <el-table-column width="140" prop="subject" label="学科"></el-table-column>
        <el-table-column width="136" prop="catalog" label="目录"></el-table-column>

        <el-table-column width="136" label="题型">
          <template slot-scope="scope">
            <p v-if="scope.row.questionType == 1">单选</p>
            <p v-else-if="scope.row.questionType == 2">多选</p>
            <p v-else-if="scope.row.questionType == 3">简答</p>
          </template>
        </el-table-column>
        <el-table-column width="280" label="题干">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column width="160" prop="addDate" label="录入时间">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>

        <el-table-column width="136" label="难度">
          <template slot-scope="scope">
            <p v-if="scope.row.difficulty == 1">简单</p>
            <p v-else-if="scope.row.difficulty == 2">一般</p>
            <p v-else-if="scope.row.difficulty == 3">困难</p>
          </template>
        </el-table-column>

        <el-table-column width="136" prop="creator" label="录入人"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-button type="primary" plain icon="el-icon-view" circle title="查看" @click="PreviewQuestions(scope.row.id)"> </el-button>
            <!-- 修改 -->
            <el-button type="success" plain icon="el-icon-edit" circle title="修改" @click="changed(scope.row.id)"></el-button>

            <!-- 删除 -->
            <el-button type="danger" plain icon="el-icon-delete" circle title="删除" @click="del(scope.row.id)"></el-button>
            <!-- 加入精选 -->
            <el-button type="warning" plain icon="el-icon-check" circle title="加入精选" @click="addGood(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="page" background layout="prev, pager, next,sizes,jumper" :total="totle" :page-size="requestParams.pagesize" :current-page="requestParams.page" :page-sizes="[5, 10, 20, 50]" @current-change="changePage" @size-change="changesize"> </el-pagination>

      <!-- 预览功能 -->
      <Preview ref="PreviewQuestions"></Preview>
    </el-card>
  </div>
</template>

<script>
import { list as questionsList, remove, choiceAdd, update } from "@/api/hmmm/questions";
import { simple as subjectList } from "@/api/hmmm/subjects";
import { simple as directoryList } from "@/api/hmmm/directorys";
import { simple as userList } from "@/api/base/users";
import { simple as tagList } from "@/api/hmmm/tags";
import { provinces as getCity, citys as getArea } from "@/api/hmmm/citys";
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
import Preview from "./../components/questions-preview";

export default {
  data() {
    return {
      questionType,
      difficulty,
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 10,
      },

      // 当前条数
      totle: 0,

      // 学科列表
      subjectOptions: [],
      // 难度选项
      diffOptions: difficulty,
      // 试题类型选项
      questionTypeOptions: questionType,
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 目录
      directoryOptions: [],
      // 城市
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
      questionsList: [],

      directoryOptions: [],

      tagOptions: [],
    };
  },
  // 组件
  components: {
    Preview,
  },

  // 钩子函数
  created() {
    this.getquestionsList(), this.created();
  },

  methods: {
    handleCity(cityName) {
      // 地区选中的数据清空
      this.requestParams.city = null;
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName);
    },
    async created() {
      // 学科下拉选项
      const { data: subjectArr } = await subjectList();
      this.subjectOptions = subjectArr;
      // 用户
      const { data: userArr } = await userList();
      this.userOptions = userArr;
    },
    async changeSubject(subjectID) {
      this.requestParams.catalogID = null;
      this.requestParams.tags = null;
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID });
        this.directoryOptions = directoryArr;
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID });
        this.tagOptions = tagArr;
        console.log("获取目录", this.directoryOptions, this.subjectID);
      } else {
        this.directoryOptions = [];
        this.tagOptions = [];
      }
    },
    // 获取列表
    async getquestionsList() {
      const { data: questionsData } = await questionsList(this.requestParams);
      this.questionsList = questionsData.items;
      this.totle = questionsData.counts;
    },
    clear() {
      for (const key in this.requestParams) {
        if (key !== "page" && key !== "pagesize") this.requestParams[key] = null;
      }
    },
    filter() {
      this.requestParams.page = 1;
      this.getquestionsList();
    },
    // 分页
    changePage(newPage) {
      this.requestParams.page = newPage;
      this.getquestionsList();
    },
    changesize(newSize) {
      this.requestParams.pagesize = newSize;
      this.getquestionsList();
    },

    // 跳转
    skipQuestions() {
      this.$router.push({ path: "new" });
    },
    // 预览

    PreviewQuestions(id) {
      this.$refs.PreviewQuestions.PreviewShow(id);
    },
    // 修改
    changed(id) {
      // update({ id })
      //  @click="$router.push(`new?id=${scope.row.id}`)"
      this.$router.push(`new?id=${id}`);
    },

    // 删除
    del(id) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove({ id });
          this.$message.success("删除成功");
          this.getquestionsList();
        })
        .catch(() => {});
    },
    // 加入精选
    addGood(id) {
      this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(async () => {
          await choiceAdd({ id: id, choiceState: 1 });
          this.$message.success("加入精选成功");
          this.getquestionsList();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
// 卡片盒子边距
.card {
  margin: 10px;
}
// 头部 边距 布局
.btn_wrapper {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
// form的下边距清0
.el-form-item--medium {
  margin-bottom: 0;
}
// 行和列的样式
.el-col {
  border-radius: 4px;
  margin-bottom: 15px;
}
// 下拉框100%
.el-select {
  width: 100%;
}
.el-alert {
  margin-bottom: 10px;
}
// 按钮布局
.button-right {
  text-align: right;
}
.page {
  margin: 15px 0 15px 0;
  float: right;
}
</style>
